<template>
    <div>
        <h1>Ref对象:{{ count }}</h1>
        <h1>代理对象{{ xiaoming }}</h1>
        <button @click="count++">修改Ref对象数据</button>
        <button @click="xiaoming.age++">修改小明的爱好</button>
    </div>
</template>

<script setup lang="ts">
//watch:Vue3新增组合式API函数,主要的作用是'数据'(ref|reactive)监听
import { ref, watch, reactive } from 'vue';
//基本类型数据Ref
const count = ref(66);
//引用类型数据代理对象
const xiaoming = reactive({ name: '小明', age: 18, hobby: ['吃饭', '睡觉', '打豆豆'] })


//watch第一种写法
//第一个参数:监听数据源(Ref对象)   --务必要书写
//第二参数:监听回调,当监听的数据发生变化的时候会触发一次 务必要书写
//第三个参数:可有可无-->配置对象
//watch函数执行,返回的是一个箭头函数,箭头函数执行可以停止数据源监听!!!!
// const stop = watch(count, (newVal, oldValue) => {
//     //回调第一个参数:监听数据最新数据 后者监听数据更新之前的数据
//     console.log(newVal);
// },
//     {
//         immediate: true,//立即监听一次---不关数据有没有变化上来立即监听一次
//         deep: true,//深度监听
//     }
// );


// //watch第二种写法
// watch(xiaoming, (newVal) => {
//     console.log(newVal);//监听到数据的变化
// })
// const updateHobby = () => {
//     xiaoming.hobby[1] = '学习';
// }



//watch第三种写法:监听数值的变化,箭头函数写法
//第一个参数:数据源(箭头函数返回结果)
//如果第一个参数:count,监听数据源对象,对象没有变化过->监听不到(如果想监听到开启深度监听)
// watch(() => count, () => {
//     console.log(123);
// }, {
//     deep: true
// })

// watch(()=>count.value,(newVal,oldValue)=>{
//      console.log(newVal,oldValue);
// });
// watch(()=>xiaoming.age,()=>{
//      console.log(123);
// })



//watch第四种写法
//数组:数组内部书写前面三种写法
watch([count, () => xiaoming], () => {
    console.log(123);
}, {
    deep: true
});
</script>

<style scoped></style>